<template>
    <transition name="fade">
        <div class="panel"
             v-if="curView">
            <header class="panel-header">
                <h3 v-if="data">{{data.title}}</h3>
                <a @click="hide"
                   class="panel-btn">
                    <icon name="delete"></icon>
                </a>
            </header>
            <component :is="curView"
                       class="panel-main"
                       :params="data"></component>
        </div>
    </transition>
</template>
<script>
/**
 * query: { action: componentName }
 */
import components from './components'
import _ from 'lodash'
export default {
    name: 'panel',
    mixins: [components],
    data() {
        return {
            data: null
        }
    },
    computed: {
        curView() {
            return this.$route.query.action
        }
    },
    methods: {
        hide() {
            const query = _.omit(this.$route.query, ['action'])
            this.$router.push({ query })
        },
        show(curView) {
            this.curView = curView
        },
        setData(data) {
            this.data = data
        }
    },
    created() {
        this.$root.$on('setData', this.setData)
    },
    destroyed() {
        this.$root.$off('setData', this.setData)
    }
}
</script>
<style lang='less'>
.panel {
    width: 33%;
    min-width: 550px;
    height: 100vh;
    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
    background: #fff;
    box-shadow: -2px 8px 4px 0px #eee;
    display: flex;
    flex-direction: column;
    &-header {
        padding: 20px;
        border-bottom: 1px solid #ddd;
        display: flex;
        align-items: center;
        color: #ffc001;
        justify-content: space-between;
    }
    &-btn {
        display: inline-block;
        cursor: pointer;
        padding: 0 10px;
    }
    &-main {
        flex: 1;
        overflow-y: auto;
    }
}
.fade-enter-active,
.fade-leave-active {
    transition: all 0.3s;
}
.fade-enter,
.fade-leave-to {
    transform: translateX(100%);
}
</style>
